<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人博客管理</title>
</head>
<body>
<div id="app">
    <h2>个人博客管理</h2>
    <button @click="toArticle()">新增</button>
    <ul>
        <li v-for="article in articles">
            {{article.title}}
            <button @click="toArticle(article.id)">修改</button>
            <button @click="deleteArticle(article.id)">删除</button>
        </li>
    </ul>
</div>
<script type="application/javascript" src="vue.js"></script>
<script type="application/javascript" src="axios.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            // user: {},
            articles: [],
            // articles: [{
            //     id: 1,
            //     title: "a"
            // }]
        },
        methods: {
            //复制首页全部的代码，调整3个：1.title和h2，2.删除欢迎你，登录注册 3.删除methods中的方法
            //个人博客初始化展示文章列表，和首页展示应该是两个接口，我们这里偷懒使用一个
            toArticle: function (id) {
                if(id){//id有值，为修改操作
                    localStorage.setItem("type", "edit");
                    localStorage.setItem("id", id);
                }else{//新增操作
                    localStorage.setItem("type", "add");
                    localStorage.removeItem("id");//新增时，不需要id字段
                }
                //跳转文章新增/修改页面
                window.location.href = "article.html";
            },
            deleteArticle: function (id) {
                axios.get("api/article/delete?id="+id)
                    .then(function (resp) {
                        let body = resp.data;
                        if(body.ok){
                            alert("操作成功");
                            window.location.reload();
                        }else{
                            alert(body.message)
                        }
                    })
            }
        },
        //初始化方法：页面加载后就执行
        created: function () {
            //发送首页初始化ajax请求，获取登录用户及文章列表
            axios.get("api/article/personal")
                .then(function (resp) {
                    // console.log(resp)
                    //后端返回的json数据
                    let body = resp.data;
                    if(body.ok){
                        //如果||前的值为空，就赋值为||后的值
                        // app.user = body.data.user || {};
                        app.articles = body.data || [];
                    }else{
                        alert(body.message)
                    }
                })
        }
    });
</script>
</body>
</html>